// 入口文件
import Vue from 'vue'
// 1.1导入路由的包
import VueRouter from 'vue-router'
// 1.2安装路由
Vue.use(VueRouter)
// 安装vuex模块，处理数据系统
import Vuex from 'vuex'
Vue.use(Vuex)

// 每次刚进入网站，肯定会调用main.js在刚调用的时候，先从本地数据中获取，放到car中
var car = JSON.parse(localStorage.getItem('car') || '[]')
var store=new Vuex.Store({
    state:{//this.$store.state.***
        car:car//将购物车中的商品的数据，用一个数组存储起来，在car 数组中，
        //存储一些商品的1对象，咱们可以暂时将这个商品对象设计成这个样子
        //{ id: 商品的id，count：要购买的数量，price:商品的单价，selected:false}
    },
    mutations:{//this.$store.commit('方法的名称'，'按需传输唯一的参数')
    addToCar(state,goodsinfo){
   // 点击购物车，把商品信息，保存到store中的car上
        // 分析
        // 1.如果购物车中，之前就2已经有这个对应商品了，那么只需要更新
        // 2.如果没有，则直接把商品数据push到car中即可
    var flag = false

        state.car.some(item=>{
            if(item.id==goodsinfo.id){
                item.count+=parseInt(goodsinfo.count)
                flag = true
                return true
            }
        })
    //    如果没有就添加

        if(!flag){
            state.car.push(goodsinfo)
        }
        // 当更新页面的时候数据会被清除，所以要把数据保存到本地存储中去
        localStorage.setItem('car',JSON.stringify(state.car))
    },
    undata(state,goodsinfo){
        // 修改购物车商品的数量值
        state.car.some(item=>{
            item.count=parseInt(goodsinfo.count)
            return true
        })
        // 当修改完商品的数量，把最新的数量保存到本地
        localStorage.setItem('car',JSON.stringify(state.car))
    },
    deletedd(state){
        state.car.some(item=>{
         state.car.splice(item,1)
         return true
        })
        localStorage.setItem('car',JSON.stringify(state.car))
    }
    },
    getters:{//this.$store.getters.****
    //   相当于 及计算属性 也相当于fillters,获取购物车的件数
    getAllCount(state){
        var c=0;
        state.car.forEach(item=>{
            c+=item.count
        })
        return c
    },
    getCount(state){
        var o={}
        state.car.forEach(item=>{
            o[item.id]=item.count
        })
        return o
       },
    getSelected(state){
        var o = {}
        state.car.forEach(item=>{
            o[item.id] = item.selected
        })
        return o
    },
    getmn(state){
        var o={
            count:0,//勾选的数量
            price:0//价格
        }
        state.car.forEach(item=>{
            o.count+=item.count
            o.price+=item.prices*item.count
        })
        
        return o
    }

    }
   
})
// 2.1导入vue-resource
import VueResource from 'vue-resource'
// 2.2安装 vue-resource
Vue.use(VueResource)

// 导入全局过滤器
import moment from 'moment'
// 定义全局的过滤器
Vue.filter('dateFormat',function(dataStr,pattern = "YYYY-MM-DD HH:mm:ss"){
    return moment(dataStr).format(pattern)
})
// 导入mui
import  './lib/mui/css/mui.css'
import  './lib/mui/css/icons-extra.css'
// 按需导入mint-ui中的组件，按需导入
// import {Header, Swipe, SwipeItem,Button,Lazyload} from 'mint-ui'
// Vue.component(Header.name,Header)
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
// Vue.component(Button.name, Button);
// Vue.use(Lazyload);
import MintUI from 'mint-ui'
Vue.use(MintUI)
// 这里可以省略node_modules这层目录
import 'mint-ui/lib/style.css'
// 1.3导入自己的router.js路由模块
import router from './router'

// 使用vue-preview插件,就是图片预览插件 
import VuePreview from 'vue-preview'
Vue.use(VuePreview)
// 导入App组件
import app from './App.vue'

var vm=new Vue({
    el:'.app',
    data:{},
    render:c=>c(app),
    router,
    store
})